<template>
  <div>
    <el-row>
      <el-button size="mini" plain type="primary" @click="onSaveTemplate">
        保存
      </el-button>
      <el-button
        size="mini"
        icon="el-icon-refresh"
        plain
        type="primary"
        @click="openData"
      >
        刷新
      </el-button>

      <el-button
        v-if="FTemplate.FID"
        size="mini"
        plain
        type="primary"
        @click="onSendTest"
      >
        模板消息发送测试
      </el-button>
    </el-row>
    <div style="height: 15px"></div>
    <el-form :model="FTemplate" label-width="120px" label-position="left">
      <el-row style="height: 40px">
        <el-col :span="8">
          <el-form-item label="配置代码">
            <el-input
              v-model="FTemplate.FTemplateCode"
              placeholder="必需的参数"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="启用" label-width="60px" label-position="right">
            <el-switch v-model="FTemplate.FIsUse" />
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item label="微信AppID">
            <el-input
              v-model="FTemplate.FWXAppID"
              placeholder="必需的参数"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row style="height: 40px">
        <el-col :span="11">
          <el-form-item label="微信模板ID">
            <el-input
              v-model="FTemplate.FWXTemplateID"
              placeholder="必需的参数"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item label="跳转URL">
            <el-input
              v-model="FTemplate.FJumUrl"
              placeholder="如需跳转请填写"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row style="height: 40px">
        <el-col :span="11">
          <el-form-item label="小程序AppID">
            <el-input
              v-model="FTemplate.FMiniprogramAppid"
              placeholder="如需跳转小程序请填写"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item label="小程序跳转URL">
            <el-input
              v-model="FTemplate.FMiniprogramPagepath"
              placeholder="如需跳转请填写"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="微信模板说明">
            <el-input
              v-model="FTemplate.FTemplateRemark"
              type="textarea"
              :rows="4"
              placeholder="微信模板备注"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item label="备注">
            <el-input
              v-model="FTemplate.FRemark"
              type="textarea"
              :rows="4"
              placeholder="其它备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button
      size="mini"
      icon="el-icon-circleplus"
      plain
      type="primary"
      @click="onAddParams"
      >添加参数</el-button
    >
    <el-table
      ref="myTable"
      :data="FTemplateParams"
      :height="FTableHeight"
      border
    >
      <el-table-column prop="FOrderNumber" label="序号" width="60px">
        <template #default="scope">
          <el-input v-model="scope.row.FOrderNumber"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="FParamName" label="微信模板参数名称">
        <template #default="scope">
          <el-input v-model="scope.row.FParamName"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="FParamCaption" label="标签说明">
        <template #default="scope">
          <el-input v-model="scope.row.FParamCaption"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="FParamJsonName" label="自定义JSON名称">
        <template #default="scope">
          <el-input v-model="scope.row.FParamJsonName"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="FParamColor" label="颜色">
        <template #default="scope">
          <el-input v-model="scope.row.FParamColor"></el-input>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100px">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="onDelParams(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 发送界面 -->
    <el-dialog
      title="微信消息模板发送测试"
      v-model="FShowSend"
      :append-to-body="true"
      width="600px"
      destroy-on-close
    >
      <el-form :model="FTemplateSend" label-width="120px" label-position="left">
        <el-form-item label="用户OpenID">
          <el-input
            v-model="FTemplateSend.openID"
            placeholder="必需的参数"
          ></el-input>
        </el-form-item>
        <el-form-item label="JSon参数">
          <el-input
            v-model="FTemplateSend.dataStr"
            type="textarea"
            :rows="10"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <el-button plain type="primary" @click="onSendTemplate"
        >发送测试</el-button
      >
    </el-dialog>
  </div>
</template>
<script lang="ts">
import WXAdminApi, {
  TWXTemplate,
  TWXTemplateOne,
  TWXTemplateParams,
  TWXTemplateTestSend,
} from "@/baselib/module/weixin/WXAdminApi";
import TFormBase from "@/views/BaseForm";
export default class TFormTemplateEidt extends TFormBase {
  declare $refs: {
    myTable: any;
  };
  private FTableHeight: number = 300;

  private FTemplateOne: TWXTemplateOne = new TWXTemplateOne();
  private FTemplate: TWXTemplate = new TWXTemplate();
  private FTemplateParams: TWXTemplateParams[] = [];
  private FWXAppID: string = "";
  //
  private FShowSend: boolean = false;
  private FTemplateSend: TWXTemplateTestSend = new TWXTemplateTestSend();
  //
  public created() {
    this.FWXAppID = this.zIndexTag?.menuParams.WXAppID;
    if (this.$myStrHelper.stringIsEmptyYW(this.FWXAppID)) {
      this.$myMsgHelp.msgHintAutoClose("微信AppID不可为空");
      return;
    }
    let tempID = this.zIndexTag?.menuParams.ID;
    if (tempID) {
      this.FTemplate.FID = tempID;
    }
    this.openData();
  }
  private async openData() {
    if (!this.FTemplate.FID) {
      this.FTemplateOne = new TWXTemplateOne();
      this.FTemplateOne.wxTemplate.FWXAppID = this.FWXAppID;
    } else {
      var lResult = await WXAdminApi.GetTemplateOne(this.FTemplate.FID);
      if (!lResult.resultSuccess) {
        this.$myMsgHelp.msgDialog(lResult.resultMsg);
        return;
      }
      this.FTemplateOne = lResult.resultData;
    }
    this.FTemplate = this.FTemplateOne.wxTemplate;
    this.FTemplateParams = this.FTemplateOne.wxTemplateParams;
    this.FTemplateOne.delParams = [];
    this.$myMsgHelp.msgHintAutoClose("打开数据成功");
  }

  public mounted() {
    //自适应列表高
    this.$nextTick(() => {
      if (this.$refs.myTable.$el != null) {
        this.FTableHeight =
          window.innerHeight - this.$refs.myTable.$el.offsetTop - 100;
      }
    });
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        if (this.$refs.myTable.$el != null) {
          this.FTableHeight =
            window.innerHeight - this.$refs.myTable.$el.offsetTop - 100;
        }
      });
    });
  }
  private onAddParams() {
    let lItem: TWXTemplateParams = new TWXTemplateParams();
    let lMaxOrderNumber = 1;
    this.FTemplateParams.forEach((item) => {
      if (item.FOrderNumber >= lMaxOrderNumber) {
        lMaxOrderNumber = item.FOrderNumber + 1;
      }
    });
    lItem.FOrderNumber = lMaxOrderNumber;
    this.FTemplateParams.push(lItem);
  }
  private onDelParams(qItem: TWXTemplateParams) {
    let lIndxe = this.FTemplateParams.findIndex((item) => {
      return item == qItem;
    });
    if (lIndxe >= 0) {
      this.FTemplateParams.splice(lIndxe, 1);
    }
    if (qItem.FParamID) {
      this.FTemplateOne.delParams.push(qItem.FParamID);
    }
  }

  private async onSaveTemplate() {
    let lResult = await WXAdminApi.SaveTemplateOne(this.FTemplateOne);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FTemplateOne = lResult.resultData;
    this.FTemplate = this.FTemplateOne.wxTemplate;
    this.FTemplateParams = this.FTemplateOne.wxTemplateParams;
    this.FTemplateOne.delParams = [];
    this.$myMsgHelp.msgHintAutoClose("保存数据成功");
  }
  private async onSendTest() {
    this.FTemplateSend.id = this.FTemplate.FID;
    if (this.FTemplateSend.dataStr == "") {
      let tempJson: any = {};
      this.FTemplateParams.forEach((item, index) => {
        let lJsonName = item.FParamJsonName;
        if (lJsonName == "") {
          lJsonName = item.FParamName;
        }
        if (lJsonName != "") {
          tempJson[lJsonName] =
            item.FParamCaption == ""
              ? "值" + (index + 1).toString()
              : item.FParamCaption;
        }
      });
      this.FTemplateSend.dataStr = JSON.stringify(tempJson);
    }
    this.FShowSend = true;
  }
  private async onSendTemplate() {
    this.FTemplateSend.data = JSON.parse(this.FTemplateSend.dataStr);
    let lResult = await WXAdminApi.TemplateTestSendAsync(this.FTemplateSend);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose(lResult.resultMsg);
  }
}
</script>